import {FC, forwardRef, useImperativeHandle ,useState} from 'react'

//声明类型
type Iprops = {
    // onInputChange: (val:string) => void
    onAddTodo:()=>void
}

// const TodoInput:FC<Iprops> = (props)=>{
// let {val, onInputChange } = props

// //onChange处理函数
// let handleChange =(e:any)=>{
//     console.log(e.target.value);
//     onInputChange(e.target.value)
// }
//     return(
//         <fieldset>
//             <legend>输入组件</legend>
//             <input type="text" value={val} onChange={handleChange} />
//             <button>提交</button>
//         </fieldset>
//     )
// }

const TodoInput = forwardRef<string,Iprops>((props,ref)=>{
    // let { onInputChange } = props
    let { onAddTodo } = props
    let [value, setValue] = useState<string>('')
    //onChange处理函数

    //将输入值通过ref暴露给父组件
    useImperativeHandle(ref,()=>{
        return value
    })

    let handleChange =(e:any)=>{
        setValue(e.target.value)
    }
        return(
            <fieldset>
                <legend>输入组件</legend>
                <input type="text" value={value} onChange={handleChange} />
                <button onClick={()=>{
                    onAddTodo()
                    setValue('')
                }} >提交</button>
            </fieldset>
        )
    })


export default TodoInput